<template>
  <div class="info-dialog">
    <el-dialog
      :visible.sync="visible"
      :title="title"
      :modal-append-to-body="true"
      :append-to-body="true"
      :destroy-on-close="false"
      :modal="true"
      :close-on-click-modal="false"
      top="10vh"
      width="850px"
      @closed="closed"
    >


    <el-tree
      :data="treeData"
      show-checkbox
      default-expand-all
      node-key="id"
      :check-strictly="true"
      ref="tree"
      :default-checked-keys="defaultCheckedKeys"
      highlight-current
      :props="defaultProps">
    </el-tree>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closed">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="submitForm">确 定</el-button>
      </span>

    </el-dialog>
  </div>
</template>

<script>



  import {
    getSceneLayerTree,
    getLayerIdsByMenuId,
    saveSceneMenuLayers
  } from '@/api/51world/sceneMenu.js'


  import {
    isOk
  } from '@/utils/request'

  export default {
    name: 'SelectLayerDialog',
    components: {
    },
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed:{
    },
    watch:{
      properties: {
        handler: function(value) {
          this.visible = value.visible
          if (value.data) {
            this.menuData= value.data
            this.title = value.data.name
          } else {
            this.menuData={}
          }
        },
        immediate: true,
        deep: false
      }
    },
    created() {
      this.load();
    },
    data(){
      return {
        visible:false,
        title:'',
        loading:false,
        menuData: {
        },
        layerIds:[],
        defaultCheckedKeys:[],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        treeData: [],
      }
    },
    created() {
      this.load();
    },
    methods:{
      load(){
        this.loading=true
        getSceneLayerTree({
          parentId:this.sceneId
        }).then(response => {
          this.loading=false
          if(isOk(response)){
            this.treeData=response.data;
            this.getLayerIdsByMenuId();
          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      getLayerIdsByMenuId(){
        this.loading=true
        getLayerIdsByMenuId({
          id:this.menuData.id
        }).then(response => {
          this.loading=false
          if(isOk(response)){
            const _data=response.data;
           for(var node of _data){
             this.defaultCheckedKeys.push(node.layerId);
           }
           this.$refs.tree.setCheckedKeys(this.defaultCheckedKeys);

          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      change(array1,array2) {
        if(array1==array2 ){
          return false;
        }
        return array1.length==array2.length && array1.every(function(v,i) { return v === array2[i]});
      },
      submitForm(){
       const selectedNodes= this.$refs.tree.getCheckedNodes();

       for(var node of selectedNodes){
         this.layerIds.push(node.id);
       }
       // for(var node of this.$refs.tree.getHalfCheckedNodes()){
       //   if(node.parentId!="0"){
       //     if(this.layerIds.findIndex(it => it == node.id)== -1){
       //        this.layerIds.push(node.id);
       //     }
       //   }
       // }
       console.log(">>>", this.layerIds);


        if(!this.change(this.layerIds,this.defaultCheckedKeys)){
            this.loading=true
            saveSceneMenuLayers({
              menuId: this.menuData.id,
              layerIds:this.layerIds.join()
            }).then(response => {
              if(200==response.code){
                this.$message({
                  type: 'success',
                  message: response.message
                })
                this.defaultCheckedKeys=this.layerIds;
                console.log(this.defaultCheckedKeys);
              }else{
                this.$message({
                  type: 'error',
                  message: response.message
                })
              }
              this.loading=false
            }).catch(err => {
              console.log(err);
            })
            .finally(() => {
              this.loading = false
            })
        }else{
          this.$message({
            type: 'warning',
            message: '数据未变动，无需保存！'
          })
        }
      },
      closed: function() {
        this.$emit('closed', false)
        // if(!this.change(this.layerIds,this.defaultCheckedKeys)){
        //   this.$confirm('图层有变动，需要保持吗?', '提示', {
        //     confirmButtonText: '确定',
        //     cancelButtonText: '取消',
        //     type: 'warning'
        //   }).then(() => {
        //     this. submitForm();
        //   }).catch(() => {
        //     this.$emit('closed', false)
        //   })
        // }else{
        //   this.$emit('closed', false)
        // }
      },
    }
  }

</script>

<style>
</style>
